<template>
    <div>
        <div class="topImg">
            <img :src="image" alt="">
        </div>
        <div class="page_content">
            <div class="tab">
                <div :class="{ 'tab_name': true, active: active == i.id }" @click="scroll(i.id)" v-for="i in tablist"
                    :key="i.name">
                    <span>{{ i.name }}</span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="list">
                <div class="types" v-for="i in tablist" :key="i.name">
                    <div class="title" :ref="i.id">
                        {{ i.name }}
                    </div>
                    <div class="cars">
                        <div  class="info" v-for="(item, index) in i.list" :key="index"
                           >
                            <ImgSwitch :colors="item.colors" :route="{ path: '/show', query: { id: item.id, op: 3 } }" />
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ImgSwitch from '@/components/ImgSwitch.vue'
export default {
    components: {
        ImgSwitch,
    },
    data() {
        return {
            tablist: [],
            active: '',
            image: ''


            // tablist: [
            //     { name: '休闲系列', list: [{ name: '富贵泉   指挥官', img: require('@/assets/img/demo.png') }] }, { name: '货运系列', list: [{ name: 'FGQ-金钢', img: require('@/assets/img/demo.png') }, { name: 'FGQ-米妮', img: require('@/assets/img/demo.png') }, { name: 'FGQ-米奇', img: require('@/assets/img/demo.png') }, { name: 'FGQ-福牛', img: require('@/assets/img/demo.png') }, { name: 'FGQ-福牛', img: require('@/assets/img/demo.png') }, { name: 'FGQ-福牛', img: require('@/assets/img/demo.png') }, { name: 'FGQ-福牛', img: require('@/assets/img/demo.png') }] }, { name: '简易一体篷车' }, { name: '特种车系列' }, { name: '环卫系列' }, { name: '载人系列' }, { name: '折叠系列' }
            // ],
            // active: '休闲系列'
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        }
    },
    watch: {
        id(n) {
            this.scroll(n)
        }
    },
    mounted() {
        this.getCars()
        this.getImage()
    },
    methods: {

        getImage() {
            this.$api.getBanner({
                slide_id: 1,
                limit: 1
            }).then(res => {
                if (res.code == 1) {
                    this.image = res.data.image
                }
            })
        },
        getCars() {
            this.$api.allCars().then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.tablist = res.data.tabList
                    this.active = res.data.tabList[0].id
                    
                    this.$nextTick(() => {
                       if(this.$route.query.id){
                        this.scroll( this.$route.query.id)
                       }
                    })
                }
            })
        },
        scroll(id) {

            this.active = id
            this.$refs[id][0].scrollIntoView({ behavior: 'smooth', top: 78 })
        }
    }
}
</script>

<style lang="scss" scoped>
.topImg {
    width: 100%;
    height: auto;
    font-size: 0;

    img {
        width: 100%;
        height: auto;
    }
}

.page_content {
    width: 100%;

    .tab {
        background-color: #F1F1F1;
        padding: 0 240px;
        height: 75px;
        width: 100%;
        display: flex;
        align-items: center;
        position: sticky;
        top: 72px;
        z-index: 97;

        .tab_name {
            margin-right: 35px;
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            color: #010000;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            justify-content: center;

            &:hover {
                color: #B30610;
            }

            .line {
                display: none;
                position: absolute;
                bottom: 0;
                width: 59px;
                height: 3px;
                background-color: #B30610;
            }


        }

        .active {
            color: #B30610;

            .line {
                display: block;
            }
        }
    }

    .list {
        width: 100%;
        padding: 0 240px 50px;
        margin-top: 30px;

        .types {
            margin-top: 50px;

            .title {
                scroll-margin-top: 180px;
                font-weight: 500;
                font-size: 30px;
                color: #000000;
                padding-bottom: 30px;
            }

            .cars {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 71px;

                .info {
                    cursor: pointer;
                    background-color: #EDEDED;
                    border-radius: 25px;
                    width: 298px;
                    height: 298px;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;
                    // padding: 60px 30px;
                    position: relative;

                    img {
                        max-width: 100%;
                        min-width: 80%;
                        height: auto;
                        max-height: 100%;
                    }

                    span {
                        position: absolute;
                        bottom: 35px;
                        font-weight: 500;
                        font-size: 16px;
                        color: #434343;
                    }
                }
            }
        }
    }
}
</style>